<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" @click="willAdd">添加</el-button>

    <!-- 表格 -->
    <!-- 7.绑定自定义事件 willEdit -->
    <!-- 3.3 将list传递给list 组件 -->
    <v-list @willEdit="willEdit" :list="list" @init="init"></v-list>

    <!-- 弹框 -->
    <!-- 3.info传递给子组件 -->
    <v-form :info="info" :list="list" @init="init" ref="form"></v-form>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { reqmenulist } from "../../http/api";
export default {
  components: {
    vList,
    vForm,
  },
  props: [],
  data() {
    return {
      // 1.声明isshow,用来做弹框出现和消失的
      // 由于dialog 组件要直接修改isshow,但是子组件是不能修改父组件传递的数据的，所以我们传递一个引用类型，这样子组件和父组件共用一个数据
      info: {
        isshow: false,
        isAdd: true, //true-添加 false-编辑
      },
      // 3.1 初始化列表数据
      list: [],
    };
  },
  computed: {
    ...mapGetters({}),
  },
  methods: {
    ...mapActions({}),
    //2.点了添加按钮
    willAdd() {
      this.info.isshow = true;
      this.info.isAdd = true;
    },

    //点了编辑
    willEdit(id) {
      this.info.isshow = true;
      this.info.isAdd = false;

      //希望form发请求
      this.$refs.form.getOne(id)
    },
    //刷新列表
    init() {
      reqmenulist({ istree: true }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.list;
        }
      });
    },
  },
  mounted() {
    //3.2 一进来就要获取列表数据
    this.init()
  },
};
</script>
<style lang="less" scoped>
@import "../../less/index.less";
.el-button {
  margin-bottom: @margin;
}
</style>